<script setup>
import {reactive} from "vue";
import store from '@/store';

const user = reactive({
  name:"",
  password: ""
})

const submit = () => {
  store.dispatch("Login",user)
}



</script>

<template>
    <div class="container">
      <div class="box">
        <div>
          智慧乡村管理系统
        </div>
        <div style="padding-top: 20px;">
          <el-input
              v-model="user.name"
              style="width: 300px"
              placeholder="用户名"
              prefix-icon="User"
          />
        </div>
        <div style="padding-top: 20px;">
          <el-input v-model="user.password" style="width: 300px" placeholder="密码" prefix-icon="Lock" />
        </div>
        <div style="padding-top: 20px;display: flex">
          <el-input v-model="aaa" style="width: 200px" placeholder="验证码" prefix-icon="Promotion" />
          <div style="padding-left: 10px;">
            <img style="height: 30px;width: 80px;" src="../../src/static/微信图片_20240911105822.jpg">
          </div>
        </div>
        <div style="padding-top: 20px;">
          <el-button type="primary" style="width: 300px" @click="submit()">登录</el-button>
        </div>
      </div>

    </div>
</template>

<style scoped>

.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  background: #e5e5e5;
}

.box{
  border-radius: 5px;
  background: #fff;
  padding: 10px 20px;
  width: 300px;
  height: 240px;
  display: flex;
  flex-direction: column;
  text-align: center;
}
</style>
